<!-- Modal Valorar-->
<div class="modal fade" id="valorar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">

    <div class="modal-content" style="border-radius:0 !important;position:relative !important;">
        <div class="aspa" data-dismiss="modal" aria-hidden="true" style="right:-10px;top:-10px;" title="Cerrar">
            <i class="glyphicon glyphicon-remove"></i>
        </div>
        <div class="modal-header" style="color:white;background-color:#5789ae;color:white;border-bottom:black solid 2px;padding:10px;">
           <div style="float:left;">
              <img class="thumb" style="width:40px;" src="../<?php echo $datos['foto'] ?>"> 
            </div>
            <div style="float:left;padding:7px 7px 0 10px;">
              <h4 class="modal-title" id="myModalLabel" style="font-weight:bold">Valorar a <?php  echo $nombreUsuario ?></h4>
            </div>
            <div style="clear:both"></div>
        </div>    
        <div class="modal-body">
          <form method="post" action="../logic/valorarUsuario.php" name="valorarUsuario" onsubmit="return validarFormularioOpinion()">
              <input type="hidden" name="uid" value="<?php echo $_POST['uid'] ?>">
              <div style="float:left;width:100%;padding:10px;">
                  <fieldset class="rating" id="estrellas" style="border:solid transparent 1px;">
                      <input type="radio" id="star5" name="estrellas" value="5" /><label for="star5" title="Rocks!">5 estrellas</label>
                      <input type="radio" id="star4" name="estrellas" value="4" /><label for="star4" title="Pretty good">4 estrellas</label>
                      <input type="radio" id="star3" name="estrellas" value="3" /><label for="star3" title="Meh">3 estrellas</label>
                      <input type="radio" id="star2" name="estrellas" value="2" /><label for="star2" title="Kinda bad">2 estrellas</label>
                      <input type="radio" id="star1" name="estrellas" value="1" /><label for="star1" title="Sucks big time">1 estrella</label>
                  </fieldset>
              </div>


               <div style="float:left;width:100%;padding:5px 10px 5px 10px;">
                   <b>Comentario</b>
              </div>
              <div style="float:left;width:100%;padding:5px 10px 10px 10px;">
                  <textarea class="input" style="height:100px;width:100%;" maxlength="150" id="opinion" name="comentario"></textarea>
              </div>

            <div style="clear:both"></div>
        </div>
        <div class="modal-footer">
          <input class="btn btn-info boton" type="submit" value="Valorar"></button>
          </form>
        </div>
    </div>
  </div>
</div>
<script>

    function validarFormularioOpinion() {

        if (document.getElementById("star5").checked ||
            document.getElementById("star4").checked ||
            document.getElementById("star3").checked ||
            document.getElementById("star2").checked ||
            document.getElementById("star1").checked ) {

            document.getElementById("estrellas").style.border = "solid transparent 1px";
            document.getElementById("estrellas").style.boxShadow = "none";
        } else {
            document.getElementById("estrellas").style.border = "solid red 1px";
            document.getElementById("estrellas").style.boxShadow = "0px 0px 15px red";
            return false;
        }

        campo = document.getElementById("opinion");
        if (campo.value == "") {
            campo.style.borderColor = "red";
            campo.style.boxShadow = "0px 0px 15px red";
            return false;
        } else {
            campo.style.borderColor = "silver";
            campo.style.boxShadow = "none";
        }
        return true;
    }

</script>